<template>
  <div class="external-service">
    <div class="external-left">
      <ul class="tabs">
        <li
          :key="index"
          v-for="(item, index) in menuList"
          :class="['item', currentIndex == index ? 'active' : '']"
          @click="handleItemClick(index)"
        >
          <img class="icon" :src="getIconAssetURL(item.icon)" />
          <span class="text">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="external-right">
      <div class="right-item" v-if="currentIndex === 0">
        <api-manage />
      </div>
      <div class="right-item" v-if="currentIndex === 1">
        <apply-manage />
      </div>
      <div class="right-item" v-if="currentIndex === 2">
        <remark-manage />
      </div>
      <div class="right-item" v-if="currentIndex === 3">
        <log-manage />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 服务接口
import ApiManage from './cpns/ApiManage/Index.vue'
// 服务申请
import ApplyManage from './cpns/ApplyManage/Index.vue'
// 日志跟踪
import RemarkManage from './cpns/RemarkManage/Index.vue'
import logManage from './cpns/logManage/index.vue'

import { getIconAssetURL } from '@/utils/loadAssets'

const menuList = [
  {
    name: '服务管理',
    icon: 'u7326.png'
  },
  {
    name: '服务申请',
    icon: 'u7400.png'
  },
  {
    name: '调度引擎',
    icon: 'u101.png'
  },
  {
    name: '日志跟踪',
    icon: 'u7400.png'
  }
]

// 当前选中的索引
const currentIndex = ref(0)
const handleItemClick = (index) => {
  currentIndex.value = index
}
</script>

<style lang="less" scoped>
.external-service {
  display: flex;
  justify-content: space-between;

  width: 100%;
  height: 100%;
  padding: 10px;

  background-color: #ffffff;
  box-sizing: border-box;

  .external-left {
    height: 100%;
    width: 200px;
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    box-sizing: border-box;

    .tabs {
      height: 100%;
      box-sizing: border-box;

      .item {
        display: flex;
        align-items: center;
        height: 45px;
        width: 100%;
        margin-bottom: 5px;
        padding-left: 30px;
        border-left: 3px solid var(--submenu-default-color);
        cursor: pointer;
        box-sizing: border-box;

        .icon {
          width: 20px;
          height: 20px;
        }

        .text {
          font-size: 16px;
          margin-left: 10px;
        }

        &.active,
        &:hover {
          background: var(--submenu-active-color);
          border-left: 3px solid var(--submenu-active-border);
          box-sizing: border-boxs;

          .text {
            color: #fff;
          }
        }
      }
    }
  }

  .external-right {
    height: 100%;
    width: calc(100% - 220px);
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    box-sizing: border-box;

    .right-item {
      height: 100%;
    }
  }
}
</style>
